<!--
 * @Author: yhy
 * @Date: 2022-03-21 15:02:30
 * @LastEditTime: 2022-03-28 17:05:34
 * @LastEditors: yhy
 * @Description:
-->
<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check='false'
      @load="onLoad"
      offset="200"
    >
      <ArticleItem
        v-for="obj in ArticleList"
        :key="obj.art_id"
        :artobj="obj"
        @dislike='dislikeFn'
        @reports='reportsFn'
      ></ArticleItem>
    </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
// 引入组件
import ArticleItem from './ArticleItem.vue'
import { getAllArticleListApi, articleDislikeAPI, articleReportsAPI } from '@/api'
import { Notify, Toast } from 'vant'
export default {
  data () {
    return {
      // 文章列表
      ArticleList: [],
      loading: false,
      finished: false,
      thisTime: new Date().getTime(),
      // 下拉刷新
      isLoading: false
    }
  },
  methods: {
    async ArticleListFn (Te) {
      // 如果 返回的时间戳为空 则不在执行下拉刷新
      if (this.thisTime === null) {
        Toast('没有更多了~')
        this.isLoading = false
        return
      }

      // 发起数据请求
      const res = await getAllArticleListApi({
        channel_id: this.channelId,
        timestamp: this.thisTime
      })

      // 判断是上拉 还是下拉,还是初次使用
      if (Te === 'onLoad' || Te === undefined) {
        // 上拉获取控制参数
        this.loading = false
        this.thisTime = res.data.data.pre_timestamp
        this.ArticleList = [...this.ArticleList, ...res.data.data.results]
        // 如果 返回的时间戳为空 则不在执行onLoad 方法
        if (this.thisTime === null) {
          this.finished = true
        }
      } else if (Te === 'onRefresh') {
        // 下拉刷新控制参数
        this.isLoading = false
        this.thisTime = res.data.data.pre_timestamp
        this.ArticleList = [...res.data.data.results, ...this.ArticleList]
        Toast('刷新成功')
      }
    },
    // 上拉获取更多功能---------------------------------------------
    onLoad () {
      // 第二种 拦截触发
      if (this.ArticleList.length === 0 || this.thisTime === null) {
        this.loading = false
        this.finished = true
        return
      }
      // 触底触发 获取文章列表
      this.ArticleListFn('onLoad')
      // console.log(res2)
    },
    // 下拉刷新功能------------------------------------------------
    onRefresh () {
      this.ArticleListFn('onRefresh')
    },
    // 反馈 - 不感兴趣
    async dislikeFn (id) {
      await articleDislikeAPI({
        target: id
      })
      Notify({ type: 'success', message: '反馈成功' })
    },
    // 反馈 - 反馈垃圾内容
    reportsFn (target, type) {
      articleReportsAPI({ target, type })
      Notify({ type: 'success', message: '举报成功' })
    }
  },
  components: {
    ArticleItem
  },
  props: {
    // list: Array
    channelId: Number
  },
  created () {
    // 首次获取文章列表
    this.ArticleListFn()
  }
}
</script>

<style></style>
